<script>
import _ from "lodash";
import { getTableData } from "@/api/table";
import { debounce } from "@/utils/mytool";
export default {
  name: "dmbtable",
  data() {
    return {
      showData: [],
      pagination_config: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      selectedData: [], // 多选数组内容
      parentObj: null,
      editRows: [], // 更改列表
      addRow: {} // 新增对象
    }
  },
  props: {
    table_config: {
      type: Object,
      default: () => ({
        thead: [], // 状态项列表
        filter_Config: {}, // 筛选条件
        SpecialField: [], // 自定义特殊字段集合,在此添加内容,得在template内添加插槽写自定义内容
        otherOptions: {}, // 表格其他属性
        rowKey: 'id', // 每行主键
        paging: false, // 是否分页
        num: true, // 是否显示序号
        select: true, // 是否有多选
        expend: false, // 是否是展开行
        weatherEdit: false, // 是否可表格内编辑
        isoperate: true, // 是否有操作列 用#operate插槽来控制
        operatewidth: '', // 操作列表宽度
        ispagination: false, // 是否有分页器
        API: {
          url: "",
          method: "get",
        }, // 接口
        isOpenGet: false, // 是否初始化查询
      }),
    },
  },
  mounted() {
    if (this.table_config.isOpenGet) {
      this.getTable();
    }
  },
  watch: {
    table_config: {
      handler() {
        console.log(66, this.table_config.filter_Config.Time);
        debounce(this.getTable(), 10000);
      },
      deep: true,
    },
  },
  methods: {
    // 获取表格数据
    getTable() {
      try {
        // 搜索条件
        const form_config = {
          ...this.table_config.filter_Config,
          ...this.pagination_config
        }
        const that = this
        setTimeout(async () => {
          const res = await getTableData(
            that.table_config.API,
            form_config,
          )
          console.log('无可奈何花落去械',res);
          if (res.rows || res.data) {
            that.total = res.total || res.data.length
            that.showData = res.data || res.rows
          }
        }, 500)
      } catch(err) {
        // 请求失败清空数据,分页器,筛选器
        this.pagination_config = {
          pageNum: 1,
          pageSize: 10
        }
        this.showData = []
      }
      this.total = 0
    },
    // 返回序号用法
    indexMethod(key) {
      return (
        (this.pagination_config.pageNum - 1) * this.pagination_config.pageSize +
        (key + 1)
      );
    },
    // 数量改变函数
    handSizeChange(value) {
      this.pagination_config.pageSize = value
    },
    // 页数改变函数
    handCurrentChange(value) {
      this.pagination_config.pageNum = value
    },
    // 多选框内容改变
    handleSelectionChange(rows) {
      this.selectedData = []

      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.selectedData.push(row[this.selectKey])
          }
        })
      }
      this.$emit('selectHandler', this.selectedData)
    },
    // 判断是否是单条数据是否是可编辑状态
    checkoutData(Key) {
      if(this.table_config.weatherEdit) {
        // 查找编辑数组内是否存在单条数据相符合
        const check = this.editRows.some(item => item[this.table_config.selectKey] === Key && Key !== 'undefiend')
        console.log(check)
        return check || false
      } else {
        return false
      }
    },

    // 双击事件
    rowsDbclick(row) {
      // 当表内编辑模式打开进行表内操作
      if(this.table_config.weatherEdit) {
        // 检查编辑对象内是否存在
        if(this.checkoutData(row[this.table_config.rowKey])) {
          this.$message.warning('当前数据已在编辑队列中了哦!')
        } else {
          // 为编辑对象数组中添加单条数据
          this.editRows.push(row)
        }
      }
      console.log(this.checkoutData(row[this.table_config.rowKey]), this.editRows)
    },

    // table表格键盘Enter事件
    tableEnter() {
      console.log(this.editRows)
    }
  }
}
</script>

<template>
  <div class="w-full">
    <el-table
      border
      style="height: 550px"
      class="w-full"
      :data="showData"
      :row-key="table_config.rowKey"
      @selection-change="handleSelectionChange"
      @row-dblclick="rowsDbclick"
    >
      <!-- 是否显示多选 -->
      <el-table-column
        reserve-selection
        v-if="table_config.select"
        type="selection"
        width="60"
        align="center"
        fixed
      />
      <!-- 是否显示序号 -->
      <el-table-column
        v-if="table_config.num"
        label="序号"
        type="index"
        :index="indexMethod"
        width="70"
        align="center"
        fixed
      />
      <!-- 是否显示扩展列 -->
      <el-table-column v-if="table_config.expend" type="expand">
        <template v-slot="{ row }">
          <slot name="expend" :row="row" />
        </template>
      </el-table-column>
      <el-form>
        <!-- 自定义项/正常显示项 -->

        <el-table-column
          v-bind="propItem"
          v-for="propItem in table_config.thead"
          :label="propItem.label"
          :key="propItem.prop"
          :align="propItem.align"
          :width="propItem.width"
          show-overflow-tooltip
        >
          <template #default="scope">
            <slot :name="propItem.prop" v-bind="scope.row">
              <el-form-item
                v-if="checkoutData(scope.row)"
                :prop="propItem.operate.field"
                :rules="propItem.operate.rules"
                :style="propItem.operate.style"
              >
                <template v-if="['input', 'password', 'textarea'].includes(propItem.operate.type)">
                  <el-input
                    :placeholder="propItem.operate.placeholder"
                    :type="propItem.operate.type"
                    v-bind="propItem.operate.otherOptions"
                    :show-password="propItem.operate.type === 'password'"
                    v-model="scope.row[`${propItem.operate.field}`]"
                  />
                </template>
                <!-- cascader联级选择器 -->
                <template v-else-if="propItem.operate.type === 'cascade'">
                  <el-cascader
                    :placeholder="propItem.operate.placeholder"
                    v-bind="propItem.operate.otherOptions"
                    style="width: 100%"
                    v-model="scope.row[`${propItem.operate.field}`]"
                    :options="propItem.operate.options"
                    :props="{
                      label: propItem.operate.optionsKey,
                      value: propItem.operate.optionsValue,
                      children: propItem.operate.optionsChildren,
                      checkStrictly: true
                    }"
                    clearable
                  >
                  </el-cascader>
                </template>
                <!-- select选择器 -->
                <template v-else-if="propItem.operate.type === 'select'">
                  <el-select
                    :placeholder="propItem.operate.placeholder"
                    v-bind="propItem.operate.otherOptions"
                    style="width: 100%"
                    v-model="scope.row[`${propItem.operate.field}`]"
                  >
                    <el-option
                      v-for="option in propItem.operate.options"
                      :key="option[propItem.operate.optionsValue || 'value']"
                      :label="option[propItem.operate.optionsKey || 'label']"
                      :value="option[propItem.operate.optionsValue || 'value']"
                    >
                    </el-option>
                  </el-select>
                </template>
                <!-- 日期选择器 -->
                <template v-else-if="propItem.operate.type === 'datePicker' || propItem.operate.type === 'daterange'">
                  <el-date-picker
                    style="width: 100%"
                    v-bind="propItem.operate.otherOptions"
                    v-model="scope.row[`${propItem.operate.field}`]"
                  >
                  </el-date-picker>
                </template>
                <!-- inputNumber计数器 -->
                <template v-else-if="propItem.operate.type === 'inputNumber'">
                  <el-input-number
                    style="width: 100%"
                    :precision="1"
                    v-bind="propItem.operate.otherOptions"
                    v-model="scope.row[`${propItem.operate.field}`]"
                  />
                </template>
                <!-- 单选多选按钮 -->
                <template v-else-if="propItem.operate.type === 'radio'">
                  <el-radio-group
                    v-model="scope.row[`${propItem.operate.field}`]"
                    :disabled="propItem.operate.otherOptions.disabled"
                  >
                    <el-radio
                      v-for="option in propItem.operate.options"
                      :label="option[propItem.operate.optionsValue || 'value']"
                      :key="option"
                    >
                      {{ option[propItem.operate.optionsKey || 'label'] }}
                    </el-radio>
                  </el-radio-group>
                </template>
              </el-form-item>
              <span v-else>{{ scope.row[propItem.prop] || '--' }}</span>
            </slot>
          </template>
        </el-table-column>
      </el-form>

<!--              <template v-for="(item,index) in table_config.thead">-->
<!--                &lt;!&ndash; 正常显示 &ndash;&gt;-->
<!--                <el-table-column-->
<!--                  :key="index"-->
<!--                  v-if="!table_config.SpecialField.includes(item.prop)"-->
<!--                  align="center"-->
<!--                  :label="item.label"-->
<!--                  :width="item.width"-->
<!--                  :prop="item.prop"-->
<!--                  v-bind="item.otherOptions"-->
<!--                />-->
<!--                &lt;!&ndash; 自定义项 &ndash;&gt;-->
<!--                <el-table-column-->
<!--                  :key="index"-->
<!--                  v-else-->
<!--                  :label="item.label"-->
<!--                  :width="item.width"-->
<!--                  align="center"-->
<!--                  show-overflow-tooltip-->
<!--                >-->
<!--                  <template v-slot="{ row }">-->
<!--                    <slot :name="item.prop" :row="row" />-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--              </template>-->

      <!-- 操作列 -->
      <el-table-column
        v-if="table_config.isoperate"
        :width="table_config.operatewidth || '50px'"
        label="操作"
        align="center"
        fixed="right"
      >
        <template v-slot="{ row }">
          <slot name="operate" :row="row" />
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="table_config.ispagination"
      class="my-2.5 flex items-center justify-center"
      :current-page="pagination_config.pageNum"
      :page-size="pagination_config.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      small
      background
      layout="total,  prev, pager, next, sizes, jumper"
      :total="total"
      @size-change="handSizeChange"
      @current-change="handCurrentChange"
    />
  </div>
</template>

<style scoped lang="scss">
</style>
